<template>
  <div class="visitor-detail-wrapper">
    <div class="name">{{ route.query.name }}（{{ route.query.idCard }}）</div>
    <div class="part">
      <div class="part-item part-item1">
        <div class="part-item-icon icon1"></div>
        <div class="part-item-content">
          <div class="part-item-content-item">
            <span class="part-item-content-item-label">预约总数</span>
            <span class="part-item-content-item-value">{{
              form.appointmentCount
            }}</span>
          </div>
        </div>
        <!-- <el-icon><ArrowDown /></el-icon> -->
      </div>
      <div class="part-item part-item1">
        <div class="part-item-icon icon1"></div>
        <div class="part-item-content">
          <div class="part-item-content-item">
            <span class="part-item-content-item-label">预约成功数</span>
            <span class="part-item-content-item-value">{{
              form.appointmentSuccessCount
            }}</span>
          </div>
        </div>
        <!-- <el-icon><ArrowDown /></el-icon> -->
      </div>
      <div class="part-item">
        <div class="part-item-icon icon2"></div>
        <div class="part-item-content">
          <div
            class="part-item-content-item"
            v-for="(item, index) of form.visitorCompanyTotalVos"
            :key="index"
          >
            <span class="part-item-content-item-label">{{
              item.companyName
            }}</span>
            <span class="part-item-content-item-value">{{ item.count }}</span>
          </div>
        </div>
        <el-icon><ArrowDown /></el-icon>
      </div>
      <div class="part-item">
        <div class="part-item-icon icon3"></div>
        <div class="part-item-content">
          <div
            class="part-item-content-item"
            v-for="(item, index) of form.visitorAccompanyVos"
            :key="index"
          >
            <span class="part-item-content-item-label">{{ item.name }}</span>
            <span class="part-item-content-item-value">{{ item.count }}</span>
          </div>
        </div>
        <el-icon><ArrowDown /></el-icon>
      </div>
    </div>
    <div class="title">
      <span
        >访客预约记录（共{{ form.visitorAppointmentInfoPage.count }}条）</span
      >
      <div class="search">
        <el-form class="search-form" inline>
          <el-form-item label="预约提交时间">
            <el-date-picker
              v-model="timeArr"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="handleChangeTime"
            />
          </el-form-item>
          <el-form-item label="关键词">
            <el-input
              class="search-input"
              v-model="searchParams.keywords"
              placeholder="请输入访客姓名、被访单位、被访人员"
              :suffix-icon="Search"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="search-right">
          <el-button type="primary" @click="handleDetail"
            ><svg-icon name="search" size="14px" />搜索</el-button
          >
        </div>
      </div>
    </div>
    <div class="record">
      <div
        class="record-item"
        v-for="(item, index) of form.visitorAppointmentInfoPage.list"
        :key="index"
      >
        <div class="record-item-top">
          <span class="record-item-top-part">
            <span class="record-item-top-info"
              ><el-icon><Calendar /></el-icon>
              {{ item.createTime }}
            </span>
            <el-tag
              effect="dark"
              :type="getDictStyle('reservationExamineStatus', item.status)"
              >{{
                getDictValue('reservationExamineStatus', item.status)
              }}</el-tag
            >
          </span>
          <span class="record-item-top-part">
            <span class="record-item-top-info"
              >入园时间：{{ item.inTime }}</span
            >
            <span class="record-item-top-info"
              >出园时间：{{ item.outTime }}</span
            >
            <span class="record-item-top-info danger"
              ><div class="danger-icon" />
              异常行为：0 次
            </span>
          </span>
        </div>
        <div class="record-item-bottom">
          <el-image
            class="record-item-bottom-img"
            fit="cover"
            :preview-src-list="[item.faceUrl]"
            preview-teleported
            :src="item.faceUrl"
          />
          <div class="record-item-bottom-info">
            <div class="record-item-bottom-info-item">
              <span class="label">联系方式:</span>
              <span class="value">{{ item.phone }}</span>
            </div>
            <div class="record-item-bottom-info-item">
              <span class="label">车牌号码:</span>
              <span class="value">{{ item.carNumber }}</span>
            </div>
            <div class="record-item-bottom-info-item">
              <span class="label">访客单位:</span>
              <span class="value">{{ item.unitName }}</span>
            </div>
            <div class="record-item-bottom-info-item">
              <span class="label">访客职务:</span>
              <span class="value">{{ item.postName }}</span>
            </div>
          </div>
          <div class="record-item-bottom-content">
            <div class="record-item-bottom-content-item">
              <span class="label">访问单位</span>
              <span class="value">{{ item.visitedUnitName }}</span>
            </div>
            <div class="record-item-bottom-content-item">
              <span class="label">访问部门</span>
              <span class="value">{{ item.visitedDepartName }}</span>
            </div>
            <div class="record-item-bottom-content-item">
              <span class="label">访问人员</span>
              <span class="value">{{ item.visitedUserName }}</span>
            </div>
            <div class="record-item-bottom-content-item">
              <span class="label">访问区域</span>
              <span class="value">{{ item.visitedRegionName }}</span>
            </div>
            <div class="record-item-bottom-content-item">
              <span class="label">预约时段</span>
              <span class="value"
                >{{ item.startTime }} - {{ item.endTime }}</span
              >
            </div>
            <div class="record-item-bottom-content-item">
              <span class="label">事由</span>
              <span class="value">{{ item.reason }}</span>
            </div>
          </div>
          <div class="record-item-bottom-title">随行人员</div>
          <div class="record-item-bottom-person">
            <div
              class="record-item-bottom-person-btn"
              v-if="item.visitorAppointmentRelList.length > 3"
              @click="handlePre"
            >
              <el-icon><ArrowLeft /></el-icon>
            </div>
            <div class="record-item-bottom-person-list">
              <div
                class="record-item-bottom-person-list-wrapper"
                :style="{
                  transform: `translate(-${90 * currentImgIndex}px, 0px)`,
                }"
              >
                <div
                  class="record-item-bottom-person-list-item"
                  v-for="(img, index1) of item.visitorAppointmentRelList"
                  :key="index1"
                >
                  <el-image
                    class="record-item-bottom-person-list-item-img"
                    fit="cover"
                    :preview-src-list="[img.faceUrl]"
                    preview-teleported
                    :src="img.faceUrl"
                  />
                  <span>{{ img.name }}</span>
                </div>
              </div>
            </div>
            <div
              class="record-item-bottom-person-btn"
              v-if="item.visitorAppointmentRelList.length > 3"
              @click="handleNext(item.visitorAppointmentRelList.length)"
            >
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { blackDetail } from '@/api/manager/visitorManage/visitorList.js'
import { useDict } from '@/hooks/useDict'
const { dict, getDictValue, getDictStyle } = useDict()
import { ElMessage } from 'element-plus'
import moment from 'moment'
import {
  ArrowDown,
  Calendar,
  ArrowLeft,
  ArrowRight,
  Search,
} from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const form = ref({
  name: '',
  idCard: '',
  visitorAppointmentInfoPage: {},
  visitorAccompanyVos: [],
  visitorCompanyTotalVos: [],
})
const searchParams = ref({
  createStartTime: undefined,
  createEndTime: undefined,
  keywords: '',
})
const handleDetail = async (isSearch = true) => {
  const res = await blackDetail({
    idCard: route.query.idCard,
    ...searchParams.value,
  })
  if (res.success) {
    if (!isSearch) {
      form.value = {
        ...res.data,
      }
      form.value.name = res.data.visitorAppointmentInfoPage.list[0].name
      form.value.idCard = res.data.visitorAppointmentInfoPage.list[0].idCard
    } else {
      form.value.visitorAppointmentInfoPage =
        res.data.visitorAppointmentInfoPage
    }
  } else {
    ElMessage.error(res.message)
  }
}
const timeArr = ref([])
const handleChangeTime = () => {
  if (timeArr.value && timeArr.value.length > 0) {
    searchParams.value.createStartTime = timeArr.value[0]
    searchParams.value.createEndTime = timeArr.value[1]
  } else {
    searchParams.value.createStartTime = undefined
    searchParams.value.createEndTime = undefined
  }
}
const currentImgIndex = ref(0)
const handleNext = (length) => {
  if (length - currentImgIndex.value === 3) {
    return
  } else {
    currentImgIndex.value += 1
  }
}
const handlePre = () => {
  if (currentImgIndex.value === 0) {
    return
  } else {
    currentImgIndex.value -= 1
  }
}

onMounted(() => {
  const startOfMonth = moment().startOf('month').format('YYYY-MM-DD')
  const endOfMonth = moment().endOf('month').format('YYYY-MM-DD')
  timeArr.value = [startOfMonth, endOfMonth]
  handleChangeTime()
  if (route.query.idCard) {
    handleDetail(false)
  }
})
</script>
<style lang="scss" scoped>
.visitor-detail-wrapper {
  width: 100%;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
  border-radius: 4px;
  .name {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 40px;
    font-weight: 500;
    font-size: 16px;
    color: #000000;
    line-height: 50px;
  }
  .part {
    width: 100%;
    height: 56px;
    background: #f3f7fe;
    display: flex;
    &-item {
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      &-icon {
        width: 50px;
        height: 50px;
      }
      .icon1 {
        background: url('@/assets/imgs/manager/visitor-icon1.png') 100% 100%
          no-repeat;
      }
      .icon2 {
        background: url('@/assets/imgs/manager/visitor-icon2.png') 100% 100%
          no-repeat;
      }
      .icon3 {
        background: url('@/assets/imgs/manager/visitor-icon3.png') 100% 100%
          no-repeat;
      }
      &-content {
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 0 25px 0 15px;
        &::-webkit-scrollbar {
          display: none;
        }
        &-item {
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          &-label {
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            line-height: 20px;
          }
          &-value {
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            line-height: 50px;
            margin-left: 25px;
          }
        }
      }
      .el-icon {
        color: #333333;
        font-size: 12px;
      }
    }
  }
  .title {
    width: 100%;
    padding: 30px 50px 0px 50px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    color: #151515;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    &::before {
      content: ' ';
      position: absolute;
      width: 4px;
      height: 16px;
      background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
      border-radius: 2px;
      top: 30px;
      left: 40px;
    }
    .search {
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: flex-start;
      cursor: pointer;
      position: relative;
      box-sizing: border-box;
    }
  }
  .record {
    width: 100%;
    height: calc(100% - 162px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px 50px;
    &-item {
      width: 100%;
      margin-bottom: 30px;
      &-top {
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        padding: 0 30px;
        background: #f3f7fe;
        box-sizing: border-box;
        border-bottom: 1px solid #d5deed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &-part {
          display: flex;
          align-items: center;
        }
        &-info {
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          line-height: 50px;
          margin-right: 15px;
          display: flex;
          align-items: center;
          .el-icon {
            font-size: 14px;
            margin-right: 8px;
            color: #a5b0c2;
          }
          .danger-icon {
            width: 20px;
            height: 20px;
            background: url('@/assets/imgs/manager/jg.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        .danger {
          color: #eb373a;
        }
      }
      &-bottom {
        width: 100%;
        height: 140px;
        background: #f3f7fe78;
        display: flex;
        box-sizing: border-box;
        padding: 15px 20px 15px 40px;
        &-img {
          width: 134px;
          height: 110px;
          margin-right: 15px;
        }
        &-info {
          width: 215px;
          border-right: 1px solid #d5deed79;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-around;
          &-item {
            .label {
              font-weight: 400;
              font-size: 14px;
              color: #333333;
              margin-right: 5px;
            }
            .value {
              font-weight: 400;
              font-size: 14px;
              color: #757575;
            }
          }
        }
        &-content {
          flex: 1;
          height: 100%;
          box-sizing: border-box;
          padding: 15px 60px 0 60px;
          display: flex;
          flex-wrap: wrap;
          &-item {
            width: 50%;
            display: flex;
            align-items: flex-start;
            .label {
              font-weight: bold;
              font-size: 12px;
              color: #757575;
              display: inline-block;
              width: 80px;
            }
            .value {
              font-weight: 400;
              font-size: 12px;
              color: #474747;
              display: inline-block;
              width: calc(100% - 80px);
            }
          }
        }
        &-title {
          font-weight: bold;
          font-size: 12px;
          color: #757575;
        }
        &-person {
          display: flex;
          align-items: center;
          justify-content: center;
          &-btn {
            width: 14px;
            height: 34px;
            background: #d5deed;
            font-size: 14px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          }
          &-list {
            width: 280px;
            box-sizing: border-box;
            padding: 0 5px;
            overflow: hidden;
            &-wrapper {
              display: flex;
            }
            &-item {
              width: 80px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              margin: 0 5px;
              .el-image {
                width: 80px;
                height: 80px;
                box-sizing: border-box;
                background: #000000;
                border-radius: 50%;
                border: 2px solid #ffffff;
              }
              span {
                font-weight: 400;
                font-size: 12px;
                color: #474747;
                margin-top: 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
